<template>
  <div class="goods-list">
    <el-card>
      <div slot="header" class="df aic jcsb">
        <span>店铺管理</span>
        <el-button
          v-if="!isEdit"
          @click="isEdit = !isEdit"
          size="small"
          type="primary"
        >
          编辑
        </el-button>
        <el-button
          v-else
          @click="
            isEdit = !isEdit
            submit()
          "
          size="small"
          type="success"
        >
          完成
        </el-button>
      </div>
      <!-- 商品名称 -->
      <el-form
        :disabled="!isEdit"
        ref="form"
        :model="formData"
        label-width="80px"
        class="form"
      >
        <el-form-item label="店铺名称">
          <el-input v-model="formData.name" placeholder="商品名称"></el-input>
        </el-form-item>
        <!-- 请选择商品分类 -->
        <el-form-item label="店铺公告">
          <el-input
            type="textarea"
            :rows="5"
            v-model="formData.bulletin"
          ></el-input>
        </el-form-item>
        <!-- 店铺头像 -->
        <el-form-item label="店铺头像">
          <el-upload
            class="avatar-uploader"
            :action="`${API}/shop/upload`"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="formData.avatar" :src="formData.avatar" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <!-- 店铺头像 -->
        <el-form-item label="店铺图片">
          <el-upload
            :action="`${API}/shop/upload`"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :file-list="formData.pics"
            :on-success="handleShopUpload"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </el-form-item>
        <!-- 配送费 -->
        <el-form-item label="配送费">
          <el-input-number
            v-model="formData.deliveryPrice"
            :precision="2"
            :step="1"
            :max="1000"
          ></el-input-number>
        </el-form-item>
        <!-- 配送时间 -->
        <el-form-item label="配送时间">
          <el-input v-model="formData.deliveryTime"></el-input>
        </el-form-item>
        <!-- 配送描述 -->
        <el-form-item label="配送描述">
          <el-input v-model="formData.description"></el-input>
        </el-form-item>
        <!-- 店铺评分 -->
        <el-form-item label="店铺评分" class="df aic rate">
          <el-rate
            disabled
            score-template="{value}"
            v-model="formData.score"
            show-score
          ></el-rate>
        </el-form-item>
        <!-- 销量 -->
        <el-form-item label="销量">
          <el-input v-model="formData.sellCount"></el-input>
        </el-form-item>
        <!-- 活动 -->
        <el-form-item label="活动">
          <el-checkbox-group
            v-if="formData.supports"
            v-model="formData.supports"
          >
            <el-checkbox label="在线支付满28减5"></el-checkbox>
            <el-checkbox label="VC无限橙汁全场8折"></el-checkbox>
            <el-checkbox label="单人精彩套餐"></el-checkbox>
            <el-checkbox label="特价饮品8折抢购"></el-checkbox>
            <el-checkbox label="单人特色套餐"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <!-- 营业时间 -->
        <el-form-item label="营业时间">
          <el-time-picker
            is-range
            v-model="formData.date"
            range-separator="至"
            value-format="yyyy-MM-dd HH:mm:ss"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            placeholder="选择时间范围"
          ></el-time-picker>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import {getShopInFoReq, editShopReq} from '@/api/shop'
export default {
  data() {
    return {
      isEdit: false,
      value: 3.7,
      dialogImageUrl: '',
      dialogVisible: false,
      API: 'http://sell.h5.itsource.cn:8087',
      formData: {},
      //多图数据
      //多图数据
      fileList: [
        {
          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
        },
        {
          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
        },
      ],
    }
  },
  methods: {
    async getData() {
      //发请求修改头像
      let res = await getShopInFoReq()
      //修改数据
      let pics = res.data.data.pics.map(v => {
        return {
          url: v,
        }
      })
      //修改评分
      let score = res.data.data.score / 20
      //数据赋值
      this.formData = {...res.data.data, pics}
    },
    //头像 上传成功触发的函数
    async handleAvatarSuccess(res) {
      //解构数据
      let {code, msg, imgUrl} = res
      //判断
      if (code === 0) {
        //发请求修改头像
        this.$message.success(msg)
        //数据回显
        this.formData.avatar = imgUrl
      }
    },
    //上传文件类型 & 上传文件大小
    beforeAvatarUpload(file) {
      const isJPG = /(png|jpeg)/.test(file.type)
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    //店铺图片  多张上传成功钩子
    handleShopUpload(res) {
      console.log('res :>> ', res)
      //解构数据
      let {code, msg, imgUrl} = res
      //判断
      if (code === 0) {
        //修改数据
        this.formData.pics.push({
          url: imgUrl,
        })
        this.$message.success(msg)
        // console.log('this.formData.pics :>> ', this.formData.pics)
      }
    },
    //
    handleRemove(file, fileList) {
      this.formData.pics = fileList
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    //点击保存  发送修改店铺请求
    async submit() {
      // 处理数据
      let pics = this.formData.pics.map(v => v.url)
      let score = this.formData.score * 20
      //发送请求
      let res = await editShopReq({
        ...this.formData,
        pics,
        score,
      })
    },
  },
  created() {
    this.getData()
  },
}
</script>

<style lang="scss" scoped>
.form {
  width: 500px;
}
.avatar-uploader :deep(.el-upload) {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 90px;
  height: 90px;
  line-height: 90px;
  text-align: center;
}
.avatar {
  width: 90px;
  height: 90px;
  display: block;
}
.rate {
  :deep(.el-form-item__content) {
    margin-left: 0 !important;
  }
}
</style>
